<template>
  <el-card>
    <el-form inline>
      <el-form-item>
        <el-input placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search">查询</el-button>
        <el-button>清空</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary">添加</el-button>
    <el-button type="danger">批量删除</el-button>

    <el-table :data="[{}]" border class="user-table">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" width="55" align="center" label="序号" />
      <el-table-column label="用户名" prop="xxx" />
      <el-table-column label="用户昵称" prop="xxx" />
      <el-table-column label="角色列表" prop="xxx" />
      <el-table-column label="创建时间" prop="xxx" />
      <el-table-column label="更新时间" prop="xxx" />
      <el-table-column label="操作" width="200" fixed="right">
        <el-tooltip content="分配角色" placement="top" effect="light">
          <el-button type="primary" :icon="UserFilled" size="small" />
        </el-tooltip>
        <el-tooltip content="修改用户" placement="top" effect="light">
          <el-button type="warning" :icon="Edit" size="small" />
        </el-tooltip>
        <el-tooltip content="删除用户" placement="top" effect="light">
          <el-button type="danger" :icon="Delete" size="small" />
        </el-tooltip>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="prev, pager, next, jumper, total, sizes, "
      :total="total"
      small
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "XUser",
};
</script>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { UserFilled, Edit, Delete, Search } from "@element-plus/icons-vue";
import type { UserList } from "@/api/cal/model/userModel";
import { getUserListApi } from "@/api/cal/user";

const username = ref("");
const userList = ref<UserList>([]);
const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(1);

// 获取用户列表

// 点击分页请求分页列表
const handleCurrentChange = (newCurrentPage: number) => {};
const handleSizeChange = (newPageSize: number) => {};
</script>

<style scoped>
.user-table {
  margin: 10px 0;
}
</style>
